<!DOCTYPE html>
<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include.jsp"%>
<%@page import="java.util.ArrayList"%>
<%@page import="net.model.Clase"%>
<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title><spring:message code="title" /></title>
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="../css/config.css" />
<link rel="stylesheet" type="text/css" href="../css/flyout.css" />
<link rel="stylesheet" type="text/css" href="../css/table.css" />
<link rel="stylesheet" type="text/css"
	href="../css/imgareaselect-default.css" />

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/jquery.validate.others.js"></script>


   <script type="text/javascript" src="../js/contextmenu.js"></script>
    <script type="text/javascript">
        SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});
        SimpleContextMenu.attach('container', 'CM1');
    </script>
<!-- 
<script type="text/javascript" src="../scripts/jquery.min.js"></script>  -->
<script type="text/javascript"
	src="../scripts/jquery.imgareaselect.pack.js"></script>

<script type="text/javascript">
	$(function() {
		$('#form').validate({
			rules : {
				k : {
					required : true,
					number : true,
					min : 0,
					max : 255
				},
				nameOutFile : {
					required : true
				},
				mode : {
					required : true
				},
				moisture : {
					required : true,
					number : true,
					min : 0,
					max : 255
				}
			},
			messages : {
				k : {
					required : "<spring:message code="errorRequired" />",
					number : "<spring:message code="errorNumber" 	/>",
					min : "<spring:message code="errorMin" arguments="0" 	/>",
					max : "<spring:message code="errorMax" arguments="100" 	/>"
				},
				nameOutFile : {
					required : "<spring:message code="errorRequired" />"
				},
				mode : {
					required : "<spring:message code="errorRequired" />"
				},
				moisture : {
					required : "<spring:message code="errorRequired" />",
					number : "<spring:message code="errorNumber" 	/>",
					min : "<spring:message code="errorMin" arguments="0" 	/>",
					max : "<spring:message code="errorMax" arguments="100" 	/>"
				}
			},
			submitHandler : function(form) {
				form.submit();
			}
		});
	});
</script>
<script language="JavaScript">
	function point_it(event){
	    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	    document.classifficatonForm.form_x.value = pos_x;
	    document.classifficatonForm.form_y.value = pos_y;
	}
	function setNameClass( id){
	    document.classifficatonForm.form_change.value = id;
	}

</script>

<script type="text/javascript">

function abrirVentana(url,mwidth,mheight,name){
	if(document.all&&window.print)
		eval('window.showModelessDialog(url,"mywindow","help:0;dialogTop:50px;dialogLeft:50px;resizable:0;dialogWidth:'+mwidth+'px;dialogHeight:'+mheight+'px")')
	else
		eval('window.open(url,"myswindow","width='+mwidth+'px,height='+mheight+'px,resizable=1,scrollbars=1,left=20,top=20")')
	if(name == "maiz anarillo")
		<% session.setAttribute("nameDetailobject", "MAIZ_AMARILLO"); %>;
		if(name == "maiz colorado")
			<% session.setAttribute("nameDetailobject", "MAIZ_COLORADO"); %>;
			else if(name == "grano partido")
			<% session.setAttribute("nameDetailobject", "GRANO_PARTIDO"); %>;
			else if(name == "grano dañado")
					<% session.setAttribute("nameDetailobject", "GRANO_DANIADO"); %>;
				else if(name == "chamico")
						<% session.setAttribute("nameDetailobject", "CHAMICO"); %>;
					else if(name == "materia extraña")
						<% session.setAttribute("nameDetailobject", "MATERIA_EXTRANIA"); %>;

}

function abrirVentana(url,mwidth,mheight){
	if(document.all&&window.print) {
		eval('window.showModelessDialog(url,"mywindow","help:0;dialogTop:50px;dialogLeft:50px;resizable:0;dialogWidth:'+mwidth+'px;dialogHeight:'+mheight+'px")')
	} else {
		eval('window.open(url,"myswindow","width='+mwidth+'px,height='+mheight+'px,resizable=1,scrollbars=1,left=220,top=120")')
	}

}

</script>
</head>
<body>
	<%!String checked_i = "";
	String checked_c = "";%>
	<%
		if (session.getAttribute("mode") != null
				&& (session.getAttribute("mode")).equals("-c")) {
			checked_i = "";
			checked_c = "checked";
		} else {
			checked_i = "checked";
			checked_c = "";
		}
	%>
	<jsp:include page="/WEB-INF/views/menu.jsp" />
<%-- 	<form:form id="form" name="classifficatonForm2" method="post">
		<input  name="nameDetailobject" type="hidden" />
		<div class="hiddencon">
			<div class="hiddencon-label">&#9679;</div>
			<ul>
				<li><a href="javascript:abrirVentana('kmeansOfObjectdetailobject',600,650,'maiz colorado');">Maíz colorado</a></li>
				<li><a href="javascript:abrirVentana('kmeansOfObjectdetailobject',600,650,'maiz amarillo');">Maíz amarillo</a></li>
				<li><a href="javascript:abrirVentana('kmeansOfObjectdetailobject',600,650,'maiz blanco');">Maíz blanco</a></li>
				<li><a href="javascript:abrirVentana('kmeansOfObjectdetailobject',600,650,'grano dañado');">Grano dañado</a></li>
				<li><a href="javascript:abrirVentana('kmeansOfObjectdetailobject',600,650,'grano partido');">Grano partdo</a></li>
				<li><a href="javascript:abrirVentana('kmeansOfObjectdetailobject',600,650,'chamico');">Chamico</a></li>
				<li><a href="javascript:abrirVentana('kmeansOfObjectdetailobject',600,650,'materia extraña');">Materia extraña</a></li>
			</ul>
		</div>
	</form:form> --%>
	<div class="hiddencon2">
		<p>
			<spring:message code="reference" />
		</p>
		<div class="hiddencon-label2">&#9679;</div>
		<fieldset>
			<c:forEach var="clase" items="${clases}">
				<div>
					<table>
						<td>
							<table border="1" cellspacing="0" cellpadding="0"
					height="10px" width="10px">
								<tr>
									<td bgcolor="${clase.colorHex}"></td>
								</tr>
							</table>
						</td>
						<td><c:out value="${clase.descripcion}" /></td>
					</table>
				</div>
			</c:forEach>
		</fieldset>
	</div>
	<form:form id="form" name="classifficatonForm" method="post">
		<input type="hidden" name="k1" value="" />
		<input type="hidden" name="nameOutFile1" value="" />
		<input  name="form_change" type="hidden" />
		 
		<table>
			<tr>
				<%
					if (request.getAttribute("clases") == null) {
				%>
				
				<fieldset>
					<legend>
						<spring:message code="menu.tools.kmeans" />
					</legend>
					<div>
						<spring:message code="k" />
						<input path="k" name="k" size="3" maxlength="3"
							value="<%=session.getAttribute("k")%>" />
						<errors path="k" cssClass="error" />
					</div>
					<div>
						<label for="nameOutFile" path="nameOutFile"><spring:message
								code="nameOutFile" /></label> <input path="nameOutFile"
							name="nameOutFile"
							value="<%=session.getAttribute("nameOutFile")%>" />
						<errors path="nameOutFile" cssClass="error" />
					</div>
					<div>
						<input type="radio" name="mode" value="-i" <%=checked_i%>>Iterativo<br>
						<input type="radio" name="mode" value="-c" <%=checked_c%>>Continuo
					</div>
					<div>
						<br> <input type="submit"
							value="<spring:message code="menu.tools.classify"/>"
							id="classifyKmeansOfObject" name="classifyKmeansOfObject" /> <br>
						<br>
					</div>
				</fieldset>
				<%
					}
				%>
			</tr>
			<tr>
				<td style="vertical-align:top">
				<%
 					if (request.getAttribute("objectsClassified") != null) {
				 %>
					<div class="hiddencon">
						<p>
							<spring:message code="classification" />
						</p>
						<fieldset>
							<div>
								<div><br> <br></div>
								<div class="CSSTableGenerator">
									<table border="0" cellspacing="0" cellpadding="2">
										<tr>
											<td><b><spring:message code="classifications" /></b></td>
											<td><b><spring:message code="quantity" /></b></td>
											<td><b><spring:message code="area" /></b></td>
										</tr>
										<c:forEach var="result" items="${objectsClassified}" >
											<tr>
												<td>${result[0]}</td>
												<td>${result[1]}</td>
												<td>${result[2]}</td>
											</tr>
										</c:forEach>
									</table>
								 </div>
								<br> <br>
								<div>
									<table cellspacing="0" cellpadding="0" border="0"  width="80%" align='center'>
										<tr>
											<td align='right'><b><spring:message code="classifications" /> &nbsp;&nbsp;&nbsp;</b></td>
											<td align='left'><b><spring:message code="quantity" /></b></td>
										</tr>
										<tr>
											<td align='right'><b><spring:message code="moisture" />
													:&nbsp;&nbsp;</b></td>
											<td align='left'><input class="input" path="moisture" id="moisture" name="moisture"
												size="4" maxlength="4" value="<%=session.getAttribute("moisture")%>" /> <errors
													path="moisture" cssClass="error" /></td>
										</tr>
										<tr>
											<td align='right'><b><spring:message
														code="testWeight" /> :&nbsp;&nbsp;</b></td>
											<td align='left'>${testWeight}</td>
										</tr>
										
										<tr>
											<td align='right'><b><spring:message code="result" />
													:&nbsp;&nbsp;</b></td>
											<td align='left'>${result}</td>
										</tr>
										<tr>
											<td align='right'><b><spring:message code="discount" />
													:&nbsp;&nbsp;</b></td>
											<td align='left'>${discount}</td>
										</tr>
											
									</table>
								</div>
								<div><br> <br></div>
								<table cellspacing="0" cellpadding="0" border="0"  width="80%" align='center'>
									<tr>
										<td>
											<input class="button" type="submit"
											value="<spring:message code="recalculate"/>" id="recalculate"
											name="recalculate" />
										</td>
										<td>
											<input class="button" type="submit"
											value="<spring:message code="saveClassification"/>" id="saveClassification"
											name="saveClassification" />
										</td>
									</tr>
								</table>
								<div><br> <br></div>
							</div>
						</fieldset>
					</div> 
					<%
 						}
					%>
				</td>
				<td>
					<%
						if (session.getAttribute("uploadFile") != null
									&& !(session.getAttribute("uploadFile")).equals("")) {
					%>
					<!-- <div style="height: 600px; width: 600px; overflow: scroll;"> -->
					<div class="container" style="height: 800px; width: 800px; overflow: scroll;"
							id="pointer_div" onMouseMove="point_it(event);">
						<img id="idImage" src="<%=session.getAttribute("uploadFile")%>"
							alt="Imagen a clasificar <%=session.getAttribute("uploadFile")%> " />
					</div>
					 X: <input type="text" name="form_x" size="4" /> - Y: <input
						type="text" name="form_y" size="4" /> <%
 	}
 %>
				</td>
				<td>
					<%
						if (request.getAttribute("objectsClassified2") != null) {
					%>
					<div>
						<script type="text/javascript">
							abrirVentana('kmeansOfObjectdetailobject2', 400,
									250);
						</script>
					</div> <%
						}
					%>
				</td>
			</tr>
		</table>

		<ul id="CM1" class="SimpleContextMenu">
			<li><a><spring:message code="info" />:</a>
				<ul>
					<input type="submit" id="info" name="info" value="Ver" />
				</ul></li>
			<li><a><spring:message code="change" />:</a>
				<ul>
					<c:forEach var="clase2" items="${clases}">
						<li><input type="submit" id="${clase2.nombre}"
							name="${clase2.nombre}" value="${clase2.descripcion}"
							onclick="setNameClass(id);"> </input></li>
					</c:forEach>
				</ul></li>
		</ul>

	</form:form>
</body>
</html>